<template>
    <div>
        <Card>
            <!--搜索框-->
            <Form :model="search" ref="form1" label-position="right" :label-width="90" inline>
                <FormItem label="品牌名称" prop="name">
                    <div class="filters-input">
                    <Input type="text" v-model="search.name" placeholder="请输入品牌名称" class="normal-input"></Input>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" icon="ios-search" @click="handleQuery('form1')">搜索</Button>
                </FormItem>
            </Form>

            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="modalEdit = true;modalType = 'add';brandInfo = {}">新增
                </Button>
            </Row>
            <!--内容 表单-->

            <el-table stripe border :loading="tableLoading" :data="tableData" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="name" label="品牌名称"></el-table-column>
                <el-table-column prop="openInstructions" label="打开指令"></el-table-column>
                <el-table-column prop="closeInstructions" label="关闭指令"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="HandleEdit( scope.row.id)">修改</el-button>
                        <el-button size="mini" type="warning" @click="HandleDelete( scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>

        <Modal v-model="modalEdit" :title="modalType == 'add' ? '新增': '修改'">
            <Form ref="saveBrandInfo" :model="brandInfo" :rules="brandRules" :label-width="90">
                <FormItem label="品牌名称" prop="name">
                    <Input v-model="brandInfo.name" placeholder="品牌名称" class="normal-input"></Input>
                </FormItem>
                <FormItem label="打开指令" prop="openInstructions">
                    <Input v-model="brandInfo.openInstructions" placeholder="打开指令" class="normal-input"></Input>
                </FormItem>
                <FormItem label="关闭指令" prop="closeInstructions">
                    <Input v-model="brandInfo.closeInstructions" placeholder="关闭指令" class="normal-input"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="saveBrandInfoLoading">确定</Button>
            </div>
        </Modal>

    </div>
</template>


<script>
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.search;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;

        //与后台交换数据
        this.postRequest("/api/doorBrand/loadData", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    export default {
        data() {
            return {
                search: {},
                pageSize: "",
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //数据表格隐藏那个状态
                tableLoading: false,
                tableData: [],

                brandRules: {
                    name: [
                        {required: true, message: "请输入品牌名称", trigger: "blur"}
                    ],
                    openInstructions: [
                        {required: true, message: "请输入开门指令", trigger: "blur"}
                    ],
                    closeInstructions: [
                        {required: true, message: "请输入开门指令", trigger: "blur"}
                    ],

                },
                modalType: 'add',
                modalEdit: false,
                brandInfo: {},
                saveBrandInfoLoading: false,
            };
        },

        created: function () {
            //加载数据
            this.loadData();
        },
        methods: {
            loadData,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //查询
            handleQuery(name) {
                this.search.pageNum = 1;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.loadData();
                    }
                });
            },
            //处理状态
            HandleDelete(id) {
                this.getRequest("/api/doorBrand/deleteById?id=" + id).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.$Message.success("删除成功!");
                        this.pageNum = 1;
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 50
                        });
                    }
                });
            },
            onCancel: function () {
                this.modalEdit = false;
            },
            //确认按钮
            handleSubmit: function () {
                this.$refs['saveBrandInfo'].validate(valid => {
                    if (valid) {
                        const url = "/api/doorBrand/saveOrUpdate"
                        this.postRequest(url, this.brandInfo).then(res => {
                            this.saveCarInfoLoading = false
                            if (res.code == 20000) {
                                this.$Message.success("操作成功！")
                                this.modalEdit = false
                                this.loadData()
                                return
                            }
                            this.$Message.error(res.message)

                        })

                    }
                })
            },
            //    编辑按钮
            HandleEdit: function (id) {
                this.modalEdit = true
                this.modalType = 'edit'
                this.getRequest("/api/doorBrand/openModel?id=" + id).then(res => {
                    this.brandInfo = res.data.doorBrand;
                });
            },
        }
    };
</script>
